import React, { useState } from 'react';
import { Row, Col, Input, Button } from 'antd';
import styles from './index.less';
import classnames from 'classnames';
import EmptyCenter from '@/components/EmptyCenter';
import IconFont from '@/components/IconFont';
import { useUnmount } from 'ahooks';
const { Search } = Input;

interface Value {
  list?: any[];
  selectedKeys?: any[];
  rest?: any[];
}
interface PriceInputProps {
  value?: Value;
  onChange?: (value: Value) => void;
  showDeleteButton?: boolean;
  description?: string;
  deleteChnge?: (value: Value) => void;
  onSearch?: (value: string) => void;
  onSelect?: (value: Value) => void;
}

const PriceInput: React.FC<PriceInputProps> = ({
  value = {},
  showDeleteButton,
  onChange,
  description,
  deleteChnge,
  onSearch,
  onSelect,
}) => {
  const [searchValue, setSearchValue] = useState<string>('');
  const list = value?.list || [];
  const selectedKeys = value?.selectedKeys || [];
  useUnmount(() => {
    setSearchValue('');
  });

  const triggerChange = (changedValue: Value) => {
    if (onChange) {
      onChange({
        selectedKeys,
        list,
        ...changedValue,
      });
    }
  };

  return (
    <Row gutter={16} className={styles['door-choose-wrap']}>
      <Col span={12}>
        <Search
          className={styles['search-wrap']}
          placeholder={'输入门名称搜索'}
          onSearch={
            onSearch
              ? onSearch
              : (value: string) => {
                  setSearchValue(value);
                }
          }
        />
      </Col>
      {showDeleteButton && (
        <Col span={12}>
          <Button
            className={styles['delete']}
            onClick={() => {
              const rest = value?.list?.filter((item: { id: number }) => {
                return !selectedKeys?.some((app: { id: number }) => app.id === item.id);
              });
              const result = {
                selectedKeys: [],
                list: rest,
              };
              deleteChnge && deleteChnge({ selectedKeys, rest, list: value?.list });

              !deleteChnge && triggerChange(result);
            }}
          >
            <IconFont type={'iconshanchu1'} />
            删除
          </Button>
        </Col>
      )}
      <Col span={24}>
        <div className={styles['door-list']}>
          <Row gutter={4}>
            {!list[0] && <EmptyCenter description={description || '请选择区域来渲染数据'} />}
            {list[0] &&
              list
                .filter((item) => {
                  return item.name.includes(searchValue);
                })
                .map((item: { name: string; id: number }, index: number) => {
                  return (
                    <Col
                      key={index.toString(36) + index}
                      span={8}
                      className={classnames(
                        styles['door-list-item'],
                        selectedKeys.filter((app) => app.id === item.id)[0] && styles['active'],
                      )}
                      onClick={() => {
                        const isHas = selectedKeys.filter((app) => app.id === item.id);
                        if (isHas[0]) {
                          const rest = selectedKeys.filter((app) => app.id !== item.id);
                          onSelect
                            ? onSelect({ selectedKeys: rest, list: value?.list })
                            : triggerChange({ selectedKeys: rest, list: value?.list });
                        } else {
                          onSelect
                            ? onSelect({ selectedKeys: [...selectedKeys, item], list: value?.list })
                            : triggerChange({
                                selectedKeys: [...selectedKeys, item],
                                list: value?.list,
                              });
                        }
                      }}
                    >
                      <div className={styles['door-list-item-content']}>{item.name}</div>
                    </Col>
                  );
                })}
          </Row>
        </div>
      </Col>
    </Row>
  );
};
export default PriceInput;
